import { List, Image, SwipeAction, Toast, Ellipsis, InfiniteScroll } from 'antd-mobile'
import Link from 'next/link'
import router from 'next/router'
import React from 'react'
import { judgeLoad } from '../../../libs/utils'
import { Relevance } from '../../../models/enums'
import { BookService } from '../../../services'
import Empty from '../../Empty'
import { Winicon } from '../../Icon'

import styles from './style.module.scss'

interface Props {
  books: BookService.Blist[]
  hasMore: boolean
  getBooks: (skip: number) => void
}

const Collect = ({ books, hasMore, getBooks }: Props) => {

  return (
    <List header='收藏'>
      {
        books?.map(book =>
          <SwipeAction
            key={book._id}
            rightActions={[
              {
                key: 'collect',
                text: '取消收藏',
                color: 'danger',
                onClick: async () => {
                  const res = await BookService.dealBook(book._id, Relevance.Collect, false)
                  if (res.stat === 'OK') {
                    Toast.show({ content: <Winicon text={res.msg} /> })
                  }
                }
              }
            ]}
          >
            <List.Item
              arrow={false}
              onClick={() => router.push(`/goods/${book._id}`)}
              prefix={
                <div className={styles.img}>
                  <Image alt='' src={book.banner[0]} fit='cover'
                    width={45} height={60} />
                </div>
              }
              extra={<>
                价格: <span className='price'>{(book.lowprice).toFixed(2)}</span>
              </>}
              description={
                <Ellipsis direction='end' rows={1} content={'简介: ' + book.content} />
              }
            >{book.title}
            </List.Item>
          </SwipeAction>
        )
      }
      {books?.length === 0 && <Empty />}
      {
        !judgeLoad(books, hasMore) &&
        <InfiniteScroll
          loadMore={async () => getBooks(books?.length)}
          hasMore={hasMore}
        />
      }
    </List>
  )
}

export default Collect
